<template>
    <div>
        <!-- 锚点导航区域 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <!-- <el-breadcrumb-item>
          <a href="#/home">首页</a>
        </el-breadcrumb-item>-->
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品列表</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 卡片视图 -->
        <el-card>
            <!-- 搜索项 -->
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-input placeholder="请输入内容" clearable v-model="paramsInfo.query" class="input-with-select" @clear="getProductList">
                        <el-button slot="append" icon="el-icon-search" @click="getProductList"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <!-- 添加商品按钮 -->
                    <el-button type="primary" @click="addProductBtn">添加商品</el-button>
                </el-col>
            </el-row>

            <!-- 表格区域 -->
            <el-table :data="productList" stripe border>
                <!-- 索引列 -->
                <el-table-column type="index"></el-table-column>
                <!-- 表格内容区域 -->
                <el-table-column prop="goods_name" label="商品名称"></el-table-column>
                <el-table-column prop="goods_price" label="商品价格(元)" width="95px"></el-table-column>
                <el-table-column prop="goods_weight" label="商品重量" width="70px"></el-table-column>
                <el-table-column label="创建时间" width="140px">
                    <template slot-scope="scope">
                       {{scope.row.add_time|dateFormat}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200px">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" icon="el-icon-edit" @click="editBtn(scope.row.goods_id)">
                            编辑</el-button>
                        <el-button type="danger" size="mini" icon="el-icon-delete" @click="delBtn(scope.row.goods_id)">
                            删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页区域 -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="paramsInfo.pagenum" :page-sizes="[5, 10, 15, 20]" :page-size="paramsInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper" :total="total" background>
            </el-pagination>
        </el-card>

        <!-- 编辑的弹框区域 -->
        <el-dialog title="编辑商品信息" :visible.sync="editDialogVisible" width="50%" @close="closeEditDialog">
            <!-- 内容主体区域 -->
            <el-form :model="editForm" status-icon :rules="editFormRules" ref="editFormRef" label-width="70px">
                <el-form-item label="" prop="">

                </el-form-item>
                <el-form-item label="" prop="">

                </el-form-item>
            </el-form>
            <!-- 内容底部区域 -->
            <span slot="footer" class="dialog_footer">
                <el-button @click="editDialogVisible=false">取消</el-button>
                <el-button type="primary" @click="confirmEditBtn">确定</el-button>
            </span>
        </el-dialog>

        <!-- 添加商品的弹框区域 -->
        <el-dialog title="添加商品" :visible.sync="addDialogVisible" width="50%" @close="closeAddDialog">
            <!-- 内容主体区域 -->
            <el-form :model="addForm" status-icon :rules="addFormRules" ref="addFormRef" label-width="70px">
                <el-form-item label="" prop="">

                </el-form-item>
                <el-form-item label="" prop="">

                </el-form-item>
            </el-form>
            <!-- 内容底部区域 -->
            <span slot="footer" class="dialog_footer">
                <el-button @click="addDialogVisible=false">取消</el-button>
                <el-button type="primary" @click="confirmAddBtn">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        // 组件名称
        name: 'List',
        // 组件参数 接收来自父组件的数据
        props: {},
        // 局部注册的组件
        components: {},
        // 组件状态值
        data() {
            return {
                addProductIptVal: '',
                //获取列表参数
                paramsInfo: {
                    query: '',
                    pagenum: 1,
                    pagesize: 5
                },
                //定义获取到的参数列表
                productList: [],
                //总条数
                total: 0,
                // 编辑的dialog的显示字段
                editDialogVisible: false,
                //编辑绑定的表单数据
                editForm: {},
                //编辑的dialog的form的验证规则
                editFormRules: {},
                //编辑绑定的表单数据
                addForm: {},
                // 新增的dialog的显示字段
                addDialogVisible: false,
                //新增dialog的form的验证规则
                addFormRules: {},
            }
        },
        // 计算属性
        computed: {},
        // 侦听器
        watch: {},
        // 组件方法
        methods: {
            //获取列表数据
            async getProductList() {
                // const { data:res } = await this.$http.get('goods',{params: this.paramsInfo});

                // if(res.meta.status!==200) return this.$message.error("列表获取失败！")

                //假数据
                const res = {
                    "data": {
                        "total": 4,
                        "pagenum": 1,
                        "goods": [
                            {
                                "goods_id": 144,
                                "goods_name": "我是假数据1",
                                "goods_price": 1,
                                "goods_number": 1,
                                "goods_weight": 1,
                                "goods_state": null,
                                "add_time": 1512954923,
                                "upd_time": 1512954923,
                                "hot_number": 0,
                                "is_promote": false
                            },
                            {
                                "goods_id": 145,
                                "goods_name": "我是假数据2",
                                "goods_price": 1,
                                "goods_number": 1,
                                "goods_weight": 1,
                                "goods_state": null,
                                "add_time": 1512954924,
                                "upd_time": 1512954924,
                                "hot_number": 0,
                                "is_promote": false
                            },
                            {
                                "goods_id": 146,
                                "goods_name": "我是假数据3",
                                "goods_price": 1,
                                "goods_number": 1,
                                "goods_weight": 1,
                                "goods_state": null,
                                "add_time": 1512954926,
                                "upd_time": 1512954926,
                                "hot_number": 0,
                                "is_promote": false
                            },
                            {
                                "goods_id": 147,
                                "goods_name": "我是假数据4",
                                "goods_price": 1,
                                "goods_number": 1,
                                "goods_weight": 1,
                                "goods_state": null,
                                "add_time": 1512954927,
                                "upd_time": 1512954927,
                                "hot_number": 0,
                                "is_promote": false
                            }
                        ]
                    }
                }
                //赋值数据列表
                this.productList = res.data.goods;
                //赋值总条数
                this.total = res.data.total
            },
            // 点击编辑弹出编辑框
            async editBtn(id) {
                //根据id获取数据并且 回显弹框
                // const { data: res } = await this.$http.post('');

                // //判断状态
                // if (res.meta.status !== 200) return this.$message.error("数据获取失败！");
                // //获取数据赋值对应的表单绑定对象
                // this.editForm = res.data;

                this.editDialogVisible = true;
            },
            //编辑的dialog的关闭事件
            closeEditDialog() {
                this.$refs.editFormRef.resetFields();
            },
            //新增的dialog的关闭事件
            closeAddDialog() {
                this.$refs.addFormRef.resetFields();
            },
            //删除 商品
            async delBtn(id) {
                //二次次弹框提示
                const confirmRes = await this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
                    confirmButtonText: '确定',   //点击确认 confirmRes返回 confirm 
                    cancelButtonText: '取消',   //点击取消 confirmRes返回 cancel
                    type: 'warning'
                }).catch(err => err)  //不写会报错 

                if (confirmRes !== "confirm") return this.$message.info("已取消删除！");

                // 根据id发送 删除请求
                // const { data: res } = await this.$http.delete('goods/' + id);
                // if (res.meta.status !== 200) return this.$message.error("删除失败！")

                //删除成功
                this.$message.error("删除成功,id===" + id);
                //重新获取列表数据
                this.getProductList();
            },
            //编辑的dialog的确定提交
            confirmEditBtn() {
                // 验证是否通过验证
                this.$refs.editFormRef.validate((valid) => {
                    if (!valid) return;
                    //   //发起验证添加用户请求
                    //   let { data: res } = this.$http.post('user' + this.getEditFormItemObj.id,{
                    //   "email": this.getEditFormItemObj.email,
                    //   "mobile": this.getEditFormItemObj.mobile,
                    // });

                    //   if (res.meta.status !== 200) return this.$message.success('编辑用户失败!');

                    //隐藏新增用户弹窗
                    this.editDialogVisible = false;
                    //重新获取用户列表
                    // this.getListDate();
                    this.$message.success('编辑用户成功!')
                })
            },
            //新增的dialog的确定提交
            confirmAddBtn() {
                // 验证是否通过验证
                this.$refs.addFormRef.validate((valid) => {
                    if (!valid) return;
                    //   //发起验证添加用户请求
                    //   let { data: res } = this.$http.post('user' + this.getEditFormItemObj.id,{
                    //   "email": this.getEditFormItemObj.email,
                    //   "mobile": this.getEditFormItemObj.mobile,
                    // });

                    //   if (res.meta.status !== 200) return this.$message.success('编辑用户失败!');

                    //隐藏新增用户弹窗
                    this.addDialogVisible = false;
                    //重新获取用户列表
                    // this.getListDate();
                    this.$message.success('新增用户成功!')
                })
            },
            // 新增显示dialog
            addProductBtn() {
                //通过路由导航 跳转添加商品列表
                this.$router.push('/goods/addProductPage');
                // this.addDialogVisible = true;
            },
            //当分页数据每页多少条改变时触发
            handleSizeChange(pagesize) {
                console.log(val)
                 //  赋值最新页码获取最新数据
                 this.paramsInfo.pagesize = pagesize;
                //调用获取列表函数
                this.getProductList();
            },
            //当点击页码时 获取最新的页码
            handleCurrentChange(currentPage) {
                console.log(currentPage);
                //  赋值最新页码获取最新数据
                this.paramsInfo.pagenum = currentPage;
                //调用获取列表函数
                this.getProductList();
            }
        },
        // 以下是生命周期钩子   注：没用到的钩子请自行删除
        /**
        * 在实例初始化之后，组件属性计算之前，如data属性等
        */
        beforeCreate() {
        },
        /**
        * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
        */
        created() {
            //调用获取参数列表函数
            this.getProductList();
        },
        /**
        * 在挂载开始之前被调用：相关的 render 函数首次被调用。
        */
        beforeMount() {
        },
        /**
        * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
        * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
        */
        mounted() {
        },
        /**
        * 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
        * 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
        */
        beforeUpdate() {
        },
        /**
        * 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
        * 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
        */
        updated() {
        },
        /**
        * keep-alive 组件激活时调用。 仅针对keep-alive 组件有效
        */
        activated() {
        },
        /**
        * keep-alive 组件停用时调用。 仅针对keep-alive 组件有效
        */
        deactivated() {
        },
        /**
        * 实例销毁之前调用。在这一步，实例仍然完全可用。
        */
        beforeDestroy() {
        },
        /**
        * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
        * 所有的事件监听器会被移除，所有的子实例也会被销毁。
        */
        destroyed() {
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style scoped>
    .el-row {
        margin-bottom: 10px;
    }
</style>